<template>
  <div class="promotion-edit page-container">
    <div class="page-header">
      <div class="header-left">
        <el-button link @click="goBack" class="back-btn">
          <svg class="back-icon" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
            />
          </svg>
          返回
        </el-button>
      </div>
      <div class="header-content">
        <h1 class="page-title">编辑促销活动</h1>
        <p class="page-subtitle">修改促销活动配置，已开始的活动不可编辑</p>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <div v-else-if="!promotionData" class="error-container">
      <el-empty description="促销活动不存在或已被删除" />
    </div>

    <div v-else-if="promotionData.status === 1" class="error-container">
      <el-alert
        title="活动进行中，无法编辑"
        type="warning"
        :closable="false"
        show-icon
      >
        <template #default>
          <p>该促销活动正在进行中，为了数据一致性，不允许编辑。</p>
          <p>如需修改，请先结束当前活动后重新创建。</p>
        </template>
      </el-alert>
    </div>

    <div v-else class="content-card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="promotion-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入活动名称"
                  maxlength="128"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动类型" prop="type">
                <el-select
                  v-model="form.type"
                  placeholder="请选择活动类型"
                  style="width: 100%"
                  disabled
                >
                  <el-option label="满减" :value="1" />
                  <el-option label="折扣" :value="2" />
                  <el-option label="特价" :value="3" />
                  <el-option label="拼团" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 商品配置 -->
        <div class="form-section">
          <h3 class="section-title">{{ getProductConfigTitle() }}</h3>
          <div class="product-list">
            <div
              v-for="(product, index) in form.promotionProductDTOS"
              :key="index"
              class="product-item"
            >
              <div class="product-header">
                <div class="product-title-section">
                  <span class="product-title">商品 {{ index + 1 }}</span>
                  <div class="sku-detail-info">
                    <span class="sku-name">{{
                      getSkuName(product.skuId)
                    }}</span>
                    <span v-if="getSkuSpecs(product.skuId)" class="sku-specs">
                      {{ getSkuSpecs(product.skuId) }}
                    </span>
                    <span class="sku-price-info"
                      >原价: ¥{{ getSkuPrice(product.skuId) }}</span
                    >
                  </div>
                </div>
              </div>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item
                    label="活动价"
                    :prop="`promotionProductDTOS.${index}.promotionPrice`"
                    :rules="getProductRules(index, 'promotionPrice')"
                  >
                    <el-input-number
                      v-model="product.promotionPrice"
                      :min="0"
                      :precision="2"
                      style="width: 100%"
                      :placeholder="getPricePlaceholder()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="促销库存"
                    :prop="`promotionProductDTOS.${index}.promotionStock`"
                    :rules="getProductRules(index, 'promotionStock')"
                  >
                    <el-input-number
                      v-model="product.promotionStock"
                      :min="1"
                      :precision="0"
                      style="width: 100%"
                      placeholder="促销库存数量"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="限购数量"
                    :prop="`promotionProductDTOS.${index}.purchaseLimit`"
                    :rules="getProductRules(index, 'purchaseLimit')"
                  >
                    <el-input-number
                      v-model="product.purchaseLimit"
                      :min="0"
                      :precision="0"
                      style="width: 100%"
                      placeholder="每人限购数量"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 规则配置 -->
        <div v-if="form.type !== 3" class="form-section">
          <h3 class="section-title">{{ getRuleConfigTitle() }}</h3>
          <div class="rule-list">
            <div
              v-for="(rule, index) in form.promotionRuleDTOS"
              :key="index"
              class="rule-item"
            >
              <div class="rule-header">
                <span class="rule-title">
                  {{ getRuleTitle(index) }}
                </span>
                <div class="rule-info">
                  <el-button
                    v-if="form.type === 1 && form.promotionRuleDTOS.length > 1"
                    type="danger"
                    size="small"
                    @click="removeRule(index)"
                  >
                    删除
                  </el-button>
                </div>
              </div>

              <!-- 满减规则 -->
              <template v-if="form.type === 1">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      label="满减门槛"
                      :prop="`promotionRuleDTOS.${index}.fullAmount`"
                      :rules="getRuleRules(index, 'fullAmount')"
                    >
                      <el-input-number
                        v-model="rule.fullAmount"
                        :min="0"
                        :precision="2"
                        style="width: 100%"
                        placeholder="满减门槛金额"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="优惠金额"
                      :prop="`promotionRuleDTOS.${index}.reduceAmount`"
                      :rules="getRuleRules(index, 'reduceAmount')"
                    >
                      <el-input-number
                        v-model="rule.reduceAmount"
                        :min="0"
                        :precision="2"
                        style="width: 100%"
                        placeholder="优惠金额"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>

              <!-- 折扣规则 -->
              <template v-if="form.type === 2">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      label="折扣率"
                      :prop="`promotionRuleDTOS.${index}.discount`"
                      :rules="getRuleRules(index, 'discount')"
                    >
                      <el-input-number
                        v-model="rule.discount"
                        :min="0.01"
                        :max="0.99"
                        :precision="2"
                        style="width: 100%"
                        placeholder="折扣率(0.01-0.99)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>

              <!-- 拼团规则 -->
              <template v-if="form.type === 4">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="拼团人数"
                      :prop="`promotionRuleDTOS.${index}.groupSize`"
                      :rules="getRuleRules(index, 'groupSize')"
                    >
                      <el-input-number
                        v-model="rule.groupSize"
                        :min="2"
                        :precision="0"
                        style="width: 100%"
                        placeholder="拼团人数"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="有效时长(分钟)"
                      :prop="`promotionRuleDTOS.${index}.validTime`"
                      :rules="getRuleRules(index, 'validTime')"
                    >
                      <el-input-number
                        v-model="rule.validTime"
                        :min="1"
                        :precision="0"
                        style="width: 100%"
                        placeholder="有效时长"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="发起人优惠"
                      :prop="`promotionRuleDTOS.${index}.initiatorReduceAmount`"
                      :rules="getRuleRules(index, 'initiatorReduceAmount')"
                    >
                      <el-input-number
                        v-model="rule.initiatorReduceAmount"
                        :min="0"
                        :precision="2"
                        style="width: 100%"
                        placeholder="发起人优惠金额"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </div>
          </div>

          <!-- 添加规则按钮 -->
          <el-button
            v-if="form.type === 1"
            type="primary"
            @click="addRule"
            class="add-rule-btn"
          >
            添加满减规则
          </el-button>
        </div>

        <!-- 活动提示 -->
        <div class="form-section">
          <h3 class="section-title">活动说明</h3>
          <div class="activity-tip">
            <el-alert
              :title="getActivityTipTitle()"
              type="info"
              :closable="false"
              show-icon
            >
              <template #default>
                <div v-html="getActivityTipContent()"></div>
              </template>
            </el-alert>
          </div>
        </div>
      </el-form>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button @click="goBack">取消</el-button>
        <el-button type="primary" @click="savePromotion" :loading="saving">
          保存修改
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { postWithAuth, getWithAuth } from "@/utils/request";

const router = useRouter();
const route = useRoute();
const formRef = ref();
const saving = ref(false);
const loading = ref(false);
const promotionData = ref<any>(null);

// 表单数据
const form = reactive({
  id: "",
  name: "",
  type: undefined as number | undefined,
  spuId: "",
  startTime: "",
  endTime: "",
  promotionProductDTOS: [] as any[],
  promotionRuleDTOS: [] as any[],
});

// SKU列表
const skuList = ref<any[]>([]);

// 表单验证规则
const rules = {
  name: [
    { required: true, message: "请输入活动名称", trigger: "blur" },
    { min: 2, max: 128, message: "长度在 2 到 128 个字符", trigger: "blur" },
  ],
  type: [{ required: true, message: "请选择活动类型", trigger: "change" }],
  startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
  endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
};

// 获取商品配置验证规则
const getProductRules = (_index: number, field: string) => {
  const rules: any[] = [];

  switch (field) {
    case "promotionPrice":
      rules.push({
        required: true,
        message: "请输入活动价",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0,
        message: "活动价必须大于0",
        trigger: "blur",
      });
      break;
    case "promotionStock":
      rules.push({
        required: true,
        message: "请输入促销库存",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 1,
        message: "促销库存必须大于0",
        trigger: "blur",
      });
      break;
    case "purchaseLimit":
      rules.push({
        required: true,
        message: "请输入限购数量",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0,
        message: "限购数量不能小于0",
        trigger: "blur",
      });
      break;
  }

  return rules;
};

// 获取规则配置验证规则
const getRuleRules = (_index: number, field: string) => {
  const rules: any[] = [];

  switch (field) {
    case "fullAmount":
      rules.push({
        required: true,
        message: "请输入满减门槛",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0,
        message: "门槛金额必须大于0",
        trigger: "blur",
      });
      break;
    case "reduceAmount":
      rules.push({
        required: true,
        message: "请输入优惠金额",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0,
        message: "优惠金额必须大于0",
        trigger: "blur",
      });
      break;
    case "discount":
      rules.push({
        required: true,
        message: "请输入折扣率",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0.01,
        max: 0.99,
        message: "折扣率必须在0.01-0.99之间",
        trigger: "blur",
      });
      break;
    case "groupSize":
      rules.push({
        required: true,
        message: "请输入拼团人数",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 2,
        message: "拼团人数必须大于等于2",
        trigger: "blur",
      });
      break;
    case "validTime":
      rules.push({
        required: true,
        message: "请输入有效时长",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 1,
        message: "有效时长必须大于0",
        trigger: "blur",
      });
      break;
    case "initiatorReduceAmount":
      rules.push({
        required: true,
        message: "请输入发起人优惠金额",
        trigger: "blur",
      });
      rules.push({
        type: "number",
        min: 0,
        message: "优惠金额必须大于等于0",
        trigger: "blur",
      });
      break;
  }

  return rules;
};

// 获取促销活动详情
const fetchPromotionDetail = async () => {
  const promotionId = route.params.id as string;
  if (!promotionId) {
    ElMessage.error("促销活动ID不存在");
    router.push("/promotions");
    return;
  }

  loading.value = true;
  try {
    const result = await getWithAuth(
      `/internal/promotion/detail?id=${promotionId}`
    );

    if (result.code === 0) {
      promotionData.value = result.data;

      // 填充表单数据
      form.id = result.data.id;
      form.name = result.data.name;
      form.type = result.data.type;
      form.spuId = result.data.spuId;
      form.startTime = result.data.startTime;
      form.endTime = result.data.endTime;

      // 转换商品配置数据
      form.promotionProductDTOS = (result.data.promotionProductVO || []).map(
        (product: any) => ({
          ...product,
          skuPrice: product.skuPrice,
          promotionPrice: product.promotionPrice,
        })
      );

      // 转换规则配置数据
      form.promotionRuleDTOS = (result.data.promotionRuleVOS || []).map(
        (rule: any) => ({
          ...rule,
          fullAmount: rule.fullAmount,
          reduceAmount: rule.reduceAmount,
          initiatorReduceAmount: rule.initiatorReduceAmount,
        })
      );

      // 获取SKU列表
      await fetchSkuList(result.data.spuId);
    } else {
      ElMessage.error(result.message || "获取促销活动详情失败");
      router.push("/promotions");
    }
  } catch (error) {
    console.error("获取促销活动详情失败:", error);
    ElMessage.error("获取促销活动详情失败");
    router.push("/promotions");
  } finally {
    loading.value = false;
  }
};

// 获取SKU列表
const fetchSkuList = async (spuId: string) => {
  try {
    const result = await getWithAuth(
      `/internal/product/skuList?spuId=${spuId}`
    );

    if (result.code === 0) {
      skuList.value = result.data || [];
    }
  } catch (error) {
    console.error("获取商品SKU失败:", error);
  }
};

// 添加满减规则
const addRule = () => {
  if (form.type !== 1) {
    ElMessage.warning("只有满减类型可以添加多个规则");
    return;
  }

  form.promotionRuleDTOS.push({
    ruleType: 1,
    fullAmount: undefined,
    reduceAmount: undefined,
  });
};

// 删除满减规则
const removeRule = (index: number) => {
  if (form.promotionRuleDTOS.length === 1) {
    ElMessage.warning("至少需要保留一个满减规则");
    return;
  }

  form.promotionRuleDTOS.splice(index, 1);
};

// 保存促销活动
const savePromotion = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    // 验证商品配置
    if (form.promotionProductDTOS.length === 0) {
      ElMessage.error("请至少添加一个商品配置");
      return;
    }

    // 验证所有商品配置都有活动价
    const invalidProduct = form.promotionProductDTOS.find(
      (product) => !product.promotionPrice || product.promotionPrice <= 0
    );
    if (invalidProduct) {
      ElMessage.error("请为所有商品配置设置有效的活动价");
      return;
    }

    // 验证规则配置（特价活动不需要规则）
    if (form.type !== 3 && form.promotionRuleDTOS.length === 0) {
      ElMessage.error("请至少添加一个规则配置");
      return;
    }

    saving.value = true;

    // 构建请求参数
    const params = {
      id: form.id,
      name: form.name,
      spuId: form.spuId,
      type: form.type,
      startTime: form.startTime,
      endTime: form.endTime,
      promotionProductDTOS: form.promotionProductDTOS,
      promotionRuleDTOS: form.promotionRuleDTOS,
    };

    const result = await postWithAuth("/internal/promotion/update", params);

    if (result.code === 0) {
      ElMessage.success("促销活动更新成功");
      router.push("/promotions");
    } else {
      ElMessage.error(result.message || "更新失败");
    }
  } catch (error) {
    console.error("保存促销活动失败:", error);
    ElMessage.error("保存失败");
  } finally {
    saving.value = false;
  }
};

// 返回列表
const goBack = () => {
  router.push("/promotions");
};

// 获取价格占位符
const getPricePlaceholder = () => {
  switch (form.type) {
    case 1:
      return "满减活动原价";
    case 2:
      return "折扣活动原价";
    case 3:
      return "特价价格";
    case 4:
      return "拼团价格";
    default:
      return "活动价";
  }
};

// 获取商品配置标题
const getProductConfigTitle = () => {
  switch (form.type) {
    case 1:
      return "满减活动商品配置";
    case 2:
      return "折扣活动商品配置";
    case 3:
      return "特价活动商品配置";
    case 4:
      return "拼团活动商品配置";
    default:
      return "商品配置";
  }
};

// 获取规则配置标题
const getRuleConfigTitle = () => {
  switch (form.type) {
    case 1:
      return "满减规则配置";
    case 2:
      return "折扣规则配置";
    case 4:
      return "拼团规则配置";
    default:
      return "规则配置";
  }
};

// 获取规则标题
const getRuleTitle = (index: number) => {
  switch (form.type) {
    case 1:
      return `满减规则 ${index + 1}`;
    case 2:
      return "折扣规则";
    case 4:
      return "拼团规则";
    default:
      return `规则 ${index + 1}`;
  }
};

// 获取活动提示标题
const getActivityTipTitle = () => {
  switch (form.type) {
    case 1:
      return "满减活动说明";
    case 2:
      return "折扣活动说明";
    case 3:
      return "特价活动说明";
    case 4:
      return "拼团活动说明";
    default:
      return "活动说明";
  }
};

// 获取活动提示内容
const getActivityTipContent = () => {
  switch (form.type) {
    case 1:
      return `
        <p>• 满减活动需要设置满减门槛和优惠金额</p>
        <p>• 可以设置多条满减规则，满足不同消费档位</p>
        <p>• 系统会自动为每个选中的SKU创建商品配置</p>
        <p>• 活动名称长度不能超过128个字符</p>
      `;
    case 2:
      return `
        <p>• 折扣活动需要设置折扣率（0.10-0.99）</p>
        <p>• 系统会自动为每个选中的SKU创建商品配置</p>
        <p>• 折扣率表示实际支付比例，如0.8表示8折</p>
        <p>• 活动名称长度不能超过128个字符</p>
      `;
    case 3:
      return `
        <p>• 特价活动需要为每个选中的SKU单独配置活动价</p>
        <p>• 系统会自动为每个SKU创建对应的商品配置</p>
        <p>• 请确保每个商品配置都设置了正确的活动价</p>
        <p>• 活动名称长度不能超过128个字符</p>
      `;
    case 4:
      return `
        <p>• 拼团活动需要设置拼团人数、有效时长和发起人优惠</p>
        <p>• 系统会自动为每个选中的SKU创建商品配置</p>
        <p>• 请确保每个商品配置都设置了正确的活动价</p>
        <p>• 活动名称长度不能超过128个字符</p>
      `;
    default:
      return `
        <p>• 请选择活动类型后查看具体说明</p>
      `;
  }
};

// 获取SKU名称
const getSkuName = (skuId: string) => {
  const sku = skuList.value.find((s) => s.id === skuId);
  return sku ? sku.skuName : skuId;
};

// 获取SKU规格信息
const getSkuSpecs = (skuId: string) => {
  const sku = skuList.value.find((s) => s.id === skuId);
  return sku ? sku.specs : "";
};

// 获取SKU原价
const getSkuPrice = (skuId: string) => {
  const sku = skuList.value.find((s) => s.id === skuId);
  return sku ? sku.price : "0.00";
};

// 页面加载时获取促销活动详情
onMounted(() => {
  fetchPromotionDetail();
});
</script>

<style scoped>
.promotion-edit {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.header-left {
  margin-right: 24px;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #718096;
  margin: 0;
  font-size: 16px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #1890ff;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.loading-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.error-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.form-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #4299e1;
}

.promotion-form {
  max-width: 100%;
}

.product-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sku-detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.sku-name {
  font-weight: 600;
  color: #2d3748;
}

.sku-specs {
  color: #718096;
  background: #f7fafc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
  max-width: 200px;
}

.sku-price-info {
  color: #e53e3e;
  font-weight: 500;
  font-size: 13px;
}

.product-list {
  margin-bottom: 16px;
}

.product-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  background: #f7fafc;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.product-title {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.rule-list {
  margin-bottom: 16px;
}

.rule-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  background: #f7fafc;
}

.rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.rule-title {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.rule-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-tip {
  margin-top: 16px;
}

.activity-tip .el-alert {
  border-radius: 8px;
}

.activity-tip .el-alert__content p {
  margin: 4px 0;
  font-size: 13px;
  color: #606266;
}

.add-rule-btn {
  margin-top: 16px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .promotion-edit {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 20px;
  }

  .header-left {
    margin-right: 0;
    margin-bottom: 8px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .back-btn {
    align-self: flex-start;
    padding: 10px 20px;
  }

  .content-card {
    padding: 16px;
    border-radius: 10px;
  }

  .form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .product-item {
    padding: 16px;
    margin-bottom: 12px;
  }

  .product-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .product-title {
    font-size: 14px;
  }

  .rule-item {
    padding: 16px;
    margin-bottom: 12px;
  }

  .rule-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .rule-title {
    font-size: 14px;
  }

  .form-actions {
    margin-top: 24px;
    padding-top: 20px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .promotion-edit {
    padding: 12px;
  }

  .page-header {
    padding: 16px;
    gap: 12px;
  }

  .header-left {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .page-title {
    font-size: 18px;
  }

  .page-subtitle {
    font-size: 12px;
  }

  .back-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .btn-icon {
    width: 14px;
    height: 14px;
  }

  .content-card {
    padding: 12px;
  }

  .form-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .product-item {
    padding: 12px;
    margin-bottom: 8px;
  }

  .product-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .product-title {
    font-size: 13px;
  }

  .rule-item {
    padding: 12px;
    margin-bottom: 8px;
  }

  .rule-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .rule-title {
    font-size: 13px;
  }

  .form-actions {
    margin-top: 20px;
    padding-top: 16px;
    gap: 8px;
  }
}
</style>
